<template>
    <div class="index-c">
        <div class="w">
            <div class="idnex-c-l">
                <h3>好书有伴</h3>
                <p> 
                    致力于实现优质内容与用户的双向互动连接，为用户赋能为优质内容生产者增值。有好书，就会有好伴!
                </p>

            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.index-c {
    height: 550px;
    background: url('../../../assets/imgs/h-bg.png') no-repeat 50%;
    background-size: auto 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    
    > div {
        width: 1200px;
        height: 100%;
        display: flex;
        justify-content: space-between;
    }

    .idnex-c-l {
        flex: 0 0 550px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        h3 {
            font-size: 48px;
            font-family: PingFang SC-Medium,PingFang SC;
            font-weight: 500;
            color: #000;
            line-height: 56px;
        }

        p {
            width: 489px;
            margin-top: 16px;
            font-size: 16px;
            font-family: PingFang SC-Light,PingFang SC;
            font-weight: 300;
            color: #000;
            line-height: 32px;
        }

        a {
            display: block;
            margin-top: 48px;
            width: 150px;
            height: 48px;
            border-radius: 80px;
            background-color: #ff6800;
            cursor: pointer;
            font-size: 18px;
            font-family: PingFang SC-Regular,PingFang SC;
            font-weight: 400;
            color: #fff;
            line-height: 48px;
            text-align: center;
        }
    }

    .idnex-c-r {
        flex: 0 0 550px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 255px;
            animation: upDown 3s ease-in-out infinite alternate ;
            transform: translate(-90px, 0);
        }
    }
}

@keyframes upDown {
    form {
        transform: translate(-90px, 50px);
    }
    50% {
        transform: translate(-90px, -50px);
    }
    to {
        transform: translate(-90px, 0);
    }
}

</style>